<template>
    <div class="chart-container">
        <el-form :model="queryParams" :rules="rules" ref="queryForm" :inline="true" v-show="showSearch"
            label-width="100px">
            <el-form-item label="大棚" prop="greenhouseId">
                <el-select v-model="queryParams.greenhouseId" placeholder="请选择大棚" clearable size="small">
                    <el-option v-for="item in greenHouseOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="日期" prop="createTime">
                <el-date-picker clearable size="small" v-model="queryParams.start" type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">生成</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <div ref="chartRef" style="width: 100%; height: 500px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { report4Hour } from '@/api/system/ghMonitor'
import { listGreenhouse } from "@/api/system/greenhouse";

export default {
    name: 'GreenhouseMonitorReport',
    data() {
        return {
            // 显示搜索条件
            showSearch: true,
            chart: null,
            // 大棚下拉框数据
            greenHouseOptions: [],
            reportData: {
                times: [],
                temperatures: [],
                humi: [],
                smoke: [],
                pm25: [],
            },
            // 查询参数
            queryParams: {
                greenhouseId: null,
                start: null,
            },
            rules: {
                greenhouseId: [
                    { required: true, message: "大棚不能为空", trigger: "blur" }
                ],
            }
        }
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery() {
            this.$refs["queryForm"].validate(valid => {
                if (valid) {
                    this.getReportData();
                }
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 获取大棚选项 */
        getGreenHouseOpts() {
            let queryParams = {
            }
            listGreenhouse(queryParams).then(response => {
                this.greenHouseOptions = response.rows;
            });
        },
        getReportData() {
            report4Hour(this.queryParams).then(response => {
                const data = response.data
                this.reportData.times = data.times
                this.reportData.temperatures = data.temperatures
                this.reportData.humi = data.humi
                this.reportData.smoke = data.smoke
                this.reportData.pm25 = data.pm25
                this.initChart();
            })
        },
        initChart() {
            if (this.$refs.chartRef) {
                this.chart = echarts.init(this.$refs.chartRef)
                const option = {
                    title: {
                        text: '过去24小时大棚环境变化曲线'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                    },
                    legend: {
                        data: ['温度', '湿度', '烟雾', 'PM2.5']
                    },
                    xAxis: {
                        type: 'category',
                        data: this.reportData.times,
                        axisLabel: {
                            rotate: 45
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '温度(°C)',
                            position: 'left'
                        },
                        {
                            type: 'value',
                            //name: '',
                            position: 'right'
                        }
                    ],
                    series: [
                        {
                            name: '温度',
                            type: 'line',
                            data: this.reportData.temperatures,
                            yAxisIndex: 0,
                            smooth: true,
                            lineStyle: {
                                width: 2
                            }
                        },
                        {
                            name: '湿度',
                            type: 'line',
                            data: this.reportData.humi,
                            yAxisIndex: 1,
                            smooth: true,
                            lineStyle: {
                                width: 2
                            }
                        },
                        {
                            name: '烟雾',
                            type: 'line',
                            data: this.reportData.smoke,
                            yAxisIndex: 1,
                            smooth: true,
                            lineStyle: {
                                width: 2
                            }
                        },
                        {
                            name: 'PM2.5',
                            type: 'line',
                            data: this.reportData.pm25,
                            yAxisIndex: 1,
                            smooth: true,
                            lineStyle: {
                                width: 2
                            }
                        }
                    ]
                }
                this.chart.setOption(option)
            }
        },
        handleResize() {
            this.chart && this.chart.resize()
        }
    },
    mounted() {
        this.getGreenHouseOpts();
        // 监听窗口大小变化，重绘图表
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        // 组件销毁前移除事件监听
        window.removeEventListener('resize', this.handleResize)
        // 销毁图表实例
        this.chart && this.chart.dispose()
    }
}
</script>

<style scoped>
.chart-container {
    padding: 20px;
    background: #fff;
    border-radius: 4px;
}
</style>